import React, { Component } from 'react'
import { connect } from 'dva';
import { Form } from 'antd';
import { SearchRow, SearchCol, SearchButton } from '@/styled/form';

import CollectionCreateForm from './FormItem';

import { UmiComponentProps, SearchComponentProps, BaseComponentProps } from '@/common/type';

interface P {
  floorId: string;
  location?: any;
}

type Props = P & UmiComponentProps & SearchComponentProps & BaseComponentProps;

@connect(({ build_floor_area, routing }) => ({
  dict: build_floor_area.dict || {},
  cond: build_floor_area.cond,
  location: routing.location
}))
class Search extends Component<Props, any> {
  formRef: any;

  state = {
    visible: false,
  }

  saveFormRef = formRef => {
    this.formRef = formRef;
  };

  showModal = () => {
    this.setState({ visible: true })
  };

  handleCancel = () => {
    const { dispatch } = this.props;
    dispatch({ type: 'upload/init' }).then(() => {
      this.setState({ visible: false })
    })
  };

  handleCreate = (v) => {
    const { form } = this.formRef.props;
    form.validateFields((err, values) => {
      const { dispatch } = this.props;
      if (err) return;
      const { number, names } = values
      const ans = {
        areaNames: names,
        floorId: this.props.floorId
      }

      dispatch({
        type: 'build_floor_area/create',
        payload: ans
      }).then(() => {
        this.setState({ visible: false }, () => form.resetFields());
      })
    });
  };

  render() {
    
    return (
      <Form>
        <SearchRow>
          <SearchCol span={24} key={2}>
            <SearchRow type="flex" justify="end">
              <SearchButton
                icon='plus' style={{ 'marginLeft': '15px' }} type="primary"
                onClick={this.showModal}
              >新增</SearchButton>
            </SearchRow>
          </SearchCol>
        </SearchRow>
        <CollectionCreateForm
          wrappedComponentRef={this.saveFormRef}
          visible={this.state.visible}
          onCancel={this.handleCancel}
          onCreate={this.handleCreate}
        />
      </Form>
    );
  }
}

const SearchS = Form.create<Props>()(Search);
export default SearchS;
